<template>
  <div :class="{ 'is-dark-mode': isDarkMode }" class="dashboard-container">
    <button @click="toggleDarkMode">切换模式</button>
    <h2 class="dashboard-title">药品管理系统 - 数据可视化</h2>

    <div class="chart-grid">
      <!-- 左上：药品库存 -->
      <div class="chart-card top-left">
        <h3 class="chart-title">
          <span></span>
          <el-button type="primary" size="small" @click="getChartsA(); initChart('boxa', optionA)">刷新</el-button>
        </h3>
        <div class="chart-box" id="boxa"></div>
      </div>

      <!-- 中间：药品分类（旭日图） - 占据上下两部分 -->
      <div class="chart-card center-chart">
        <h3 class="chart-title">
          <span>药品分类统计</span>
          <el-button type="primary" size="small" @click="getChartsE(); initChart('boxe', optionE)">刷新</el-button>
        </h3>
        <div class="chart-box" id="boxe"></div>
      </div>

      <!-- 右上：订单状态 -->
      <div class="chart-card top-right">
        <h3 class="chart-title">
          <span></span>
          <el-button type="primary" size="small" @click="getChartsB(); initChart('boxb', optionB)">刷新</el-button>
        </h3>
        <div class="chart-box" id="boxb"></div>
      </div>

      <!-- 左下：仓库容量 -->
      <div class="chart-card bottom-left">
        <h3 class="chart-title">
          <span></span>
          <el-button type="primary" size="small" @click="getChartsC(); initChart('boxc', optionC)">刷新</el-button>
        </h3>
        <div class="chart-box" id="boxc"></div>
      </div>

      <!-- 右下：用户角色 -->
      <div class="chart-card bottom-right">
        <h3 class="chart-title">
          <span></span>
          <el-button type="primary" size="small" @click="getChartsD(); initChart('boxd', optionD)">刷新</el-button>
        </h3>
        <div class="chart-box" id="boxd"></div>
      </div>
    </div>
  </div>
</template>


<script setup>
import { onMounted } from "vue";
import api from '../api/chart.js';
import echarts from '../util/echarts.js';
import { ref } from "vue";
import { ElLoading } from 'element-plus';

// 药品库存图表配置
const optionA = ref({
  title: { text: '药品库存统计', left: 'center' },
  tooltip: { trigger: 'axis' },
  xAxis: { type: 'category', data: [] },
  yAxis: { type: 'value' },
  series: [{
    type: 'bar',
    data: [],
    itemStyle: { color: '#5470C6' }
  }]
});

// 订单状态图表配置
const optionB = ref({
  title: { text: '订单状态统计', left: 'center' },
  tooltip: { trigger: 'item' },
  series: [{
    type: 'pie',
    radius: '50%',
    data: [],
    emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } }
  }]
});

// 仓库容量图表配置
const optionC = ref({
  title: { text: '仓库容量统计', left: 'center' },
  tooltip: { trigger: 'axis', formatter: '{b}<br />库存: {c0}<br />容量: {c1}' },
  legend: { data: ['当前库存', '最大容量'], bottom: 10 },
  grid: { left: '3%', right: '4%', bottom: '15%', top: '15%', containLabel: true },
  xAxis: { type: 'category', data: [] },
  yAxis: { type: 'value' },
  series: [
    {
      name: '当前库存',
      type: 'bar',
      data: [],
      itemStyle: { color: '#91CC75' }
    },
    {
      name: '最大容量',
      type: 'bar',
      data: [],
      itemStyle: { color: '#FAC858' }
    }
  ]
});

// 用户角色图表配置
const optionD = ref({
  title: { text: '用户角色分布', left: 'center' },
  tooltip: { trigger: 'item' },
  legend: { orient: 'vertical', right: 10, top: 'center' },
  series: [{
    name: '用户角色',
    type: 'pie',
    radius: ['40%', '70%'],
    avoidLabelOverlap: false,
    label: { show: false, position: 'center' },
    emphasis: { label: { show: true, fontSize: '18', fontWeight: 'bold' } },
    labelLine: { show: false },
    data: []
  }]
});
//color: ['#FFAE57', '#FF7853', '#EA5151', '#CC3F57', '#9A2555'],
// 药品分类图表配置 (旭日图样式)
const optionE = ref({
  backgroundColor: '#2E2733',
  color: ['#FFAE57', '#FF7853', '#EA5151', '#CC3F57', '#9A2555'],
  series: [{
    type: 'sunburst',
    radius: ['0%', '100%'], // 占满整个容器
    center: ['50%', '50%'],
    data: [],
    sort: null,
    label: {
      rotate: 'radial',
      color: '#2E2733'
    },
    itemStyle: {
      borderColor: '#2E2733',
      borderWidth: 2
    },
    levels: [
      {},
      {
        r0: 0,
        r: '25%',
        label: { rotate: 0 }
      },
      {
        r0: '25%',
        r: '45%'
      },
      {
        r0: '45%',
        r: '70%'
      },
      {
        r0: '70%',
        r: '95%',
        itemStyle: {
          shadowBlur: 80,
          shadowColor: '#FFAE57'
        },
        label: {
          position: 'outside',
          textShadowBlur: 5,
          textShadowColor: '#333'
        }
      }
    ]
  }]
});

// 获取药品库存数据
async function getChartsA() {
  const result = await api.getChartsA();
  optionA.value.xAxis.data = result.name;
  optionA.value.series[0].data = result.number;
}

// 获取订单状态数据
async function getChartsB() {
  const result = await api.getChartsB();
  optionB.value.series[0].data = result.status.map((status, index) => ({
    value: result.count[index],
    name: status
  }));
}

// 获取仓库容量数据
async function getChartsC() {
  const result = await api.getChartsC();
  optionC.value.xAxis.data = result.name;
  optionC.value.series[0].data = result.quantity;
  optionC.value.series[1].data = result.capacity;
}

// 获取用户角色数据
async function getChartsD() {
  const result = await api.getChartsD();
  optionD.value.series[0].data = result.role.map((role, index) => ({
    value: result.count[index],
    name: role
  }));
}

// 获取药品分类数据
async function getChartsE() {
  const result = await api.getChartsE();

  // 转换数据为旭日图结构
  const sunburstData = {
    name: '药品分类',
    children: result.category.map((cat, index) => ({
      name: cat,
      value: result.total[index]
    }))
  };

  optionE.value.series[0].data = [sunburstData];
}

// 初始化所有图表
async function initAllCharts() {
  const loading = ElLoading.service({ fullscreen: true });
  try {
    await Promise.all([
      getChartsA(),
      getChartsB(),
      getChartsC(),
      getChartsD(),
      getChartsE()
    ]);
  } finally {
    loading.close();
  }

  initChart('boxa', optionA.value);
  initChart('boxb', optionB.value);
  initChart('boxc', optionC.value);
  initChart('boxd', optionD.value);
  initChart('boxe', optionE.value);
}

// 通用图表初始化函数
function initChart(id, option) {
  const chart = echarts.init(document.getElementById(id));
  chart.setOption(option);

  // 响应窗口大小变化
  window.addEventListener('resize', () => chart.resize());
}

onMounted(() => {
  initAllCharts();
});
const isDarkMode = ref(false);

function toggleDarkMode() {
  isDarkMode.value = !isDarkMode.value;
}
</script>

<style scoped>
/* 修改网格布局 */
.chart-grid {
  display: grid;
  grid-template-areas:
    "top-left center-chart top-right"
    "bottom-left center-chart bottom-right";
  grid-template-columns: 1fr 1.5fr 1fr; /* 增加中间列宽度 */
  grid-template-rows: 1fr 1fr;
  gap: 15px;
  min-height: 900px; /* 增加整体高度 */
}

/* 区域分配 */
.top-left {
  grid-area: top-left;
}

.center-chart {
  grid-area: center-chart;
  display: flex;
  flex-direction: column;
}

.top-right {
  grid-area: top-right;
}

.bottom-left {
  grid-area: bottom-left;
}

.bottom-right {
  grid-area: bottom-right;
}

/* 图表卡片样式 */
.chart-card {
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  padding: 12px; /* 减少内边距 */
  display: flex;
  flex-direction: column;
  height: 100%;
}

.is-dark-mode .chart-card {
  background-color: #34495e;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.chart-title {
  font-size: 15px; /* 减小字体大小 */
  color: var(--text-color);
  margin: 0 0 8px; /* 减少下边距 */
  font-weight: 600;
  text-align: center;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-title span {
  flex-grow: 1;
  text-align: center;
}

.chart-box {
  width: 100%;
  height: 100%;
  min-height: 250px;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  flex: 1;
}

/* 中间图表更大 */
.center-chart .chart-box {
  min-height: 500px; /* 显著增加高度 */
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .chart-grid {
    grid-template-areas:
      "top-left top-right"
      "center-chart center-chart"
      "bottom-left bottom-right";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    min-height: 1000px; /* 增加高度 */
  }

  .center-chart {
    grid-area: center-chart;
  }

  .center-chart .chart-box {
    min-height: 400px; /* 中等屏幕下的高度 */
  }
}

@media (max-width: 992px) {
  .chart-grid {
    min-height: 1200px; /* 在小屏幕上增加高度 */
  }
}

@media (max-width: 768px) {
  .chart-grid {
    grid-template-areas:
      "top-left"
      "center-chart"
      "top-right"
      "bottom-left"
      "bottom-right";
    grid-template-columns: 1fr;
    grid-template-rows: repeat(5, auto);
    min-height: 1500px; /* 移动端增加高度 */
  }

  .chart-box {
    min-height: 300px; /* 增加所有图表高度 */
  }

  .center-chart .chart-box {
    min-height: 500px; /* 移动端旭日图高度 */
  }
}
</style>